<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="../../css/mui.min.css" rel="stylesheet" />
    <link href="../../css/mui.listpicker.css" rel="stylesheet" />
    <link href="../../css/mui.poppicker.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <style type="text/css">
      html,
      body {
        background-color: #efeff4;
      }
      .mui-views,
      .mui-view,
      .mui-pages,
      .mui-page,
      .mui-page-content {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background-color: #efeff4;
      }
      .mui-pages {
        top: 46px;
        height: auto;
      }
      .mui-scroll-wrapper,
      .mui-scroll {
        background-color: #efeff4;
      }
      .mui-page.mui-transitioning {
        -webkit-transition: -webkit-transform 300ms ease;
        transition: transform 300ms ease;
      }
      .mui-page-left {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
      .mui-ios .mui-page-left {
        -webkit-transform: translate3d(-20%, 0, 0);
        transform: translate3d(-20%, 0, 0);
      }
      .mui-navbar {
        position: fixed;
        right: 0;
        left: 0;
        z-index: 10;
        height: 44px;
        background-color: #f7f7f8;
      }
      .mui-navbar .mui-bar {
        position: absolute;
        background: transparent;
        text-align: center;
      }
      .mui-android .mui-navbar-inner.mui-navbar-left {
        opacity: 0;
      }
      .mui-ios .mui-navbar-left .mui-left,
      .mui-ios .mui-navbar-left .mui-center,
      .mui-ios .mui-navbar-left .mui-right {
        opacity: 0;
      }
      .mui-navbar .mui-btn-nav {
        -webkit-transition: none;
        transition: none;
        -webkit-transition-duration: .0s;
        transition-duration: .0s;
      }
      .mui-navbar .mui-bar .mui-title {
        display: inline-block;
        position: static;
        width: auto;
      }
      .mui-page-shadow {
        position: absolute;
        right: 100%;
        top: 0;
        width: 16px;
        height: 100%;
        z-index: -1;
        content: '';
      }
      .mui-page-shadow {
        background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
        background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
      }
      .mui-navbar-inner.mui-transitioning,
      .mui-navbar-inner .mui-transitioning {
        -webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
        transition: opacity 300ms ease, transform 300ms ease;
      }
      .mui-page {
        display: none;
      }
      .mui-pages .mui-page {
        display: block;
      }
      .mui-page .mui-table-view:first-child {
        margin-top: 15px;
      }
      .mui-page .mui-table-view:last-child {
        margin-bottom: 30px;
      }
      .mui-table-view {
        margin-top: 20px;
      }
      .mui-table-view:after {
        height: 0;
      }
      .mui-table-view span.mui-pull-right {
        color: #999;
      }
      .mui-table-view-divider {
        background-color: #efeff4;
        font-size: 14px;
      }
      .mui-table-view-divider:before,
      .mui-table-view-divider:after {
        height: 0;
      }
      .head {
        height: 40px;
      }
      #head {
        line-height: 40px;
      }
      .head-img {
        width: 40px;
        height: 40px;
      }
      #head-img1 {
        position: absolute;
        bottom: 10px;
        right: 40px;
        width: 40px;
        height: 40px;
      }
      .update {
        font-style: normal;
        color: #999999;
        margin-right: -25px;
        font-size: 15px
      }
      .mui-fullscreen {
        position: fixed;
        z-index: 20;
        background-color: #000;
      }
      .mui-btn {
        font-size: 16px;
        padding: 8px;
        margin: 3px;
      }
      h5.mui-content-padded {
        margin-left: 3px;
        margin-top: 20px !important;
      }
      h5.mui-content-padded:first-child {
        margin-top: 12px !important;
      }
      .ui-alert {
        text-align: center;
        padding: 20px 10px;
        font-size: 16px;
      }
      .qty_input {
        text-align: center;
      }
      .qty_input input[type="number"],
      input[type="text"],
      .input-num {
        margin-bottom: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
        padding-right: 0px;
        text-align: center;
        border: none;
      }
    </style>
  </head>

  <body>
    <!--页面主结构开始-->
    <div id="app" class="mui-views">
      <div class="mui-view">
        <div class="mui-navbar">
        </div>
        <div class="mui-pages">
        </div>
      </div>
    </div>
    <!--页面主结构结束-->
    <!--单页面开始-->
    <div id="order" class="mui-page">
      <!--页面标题栏开始-->
      <div class="mui-navbar-inner mui-bar mui-bar-nav">
        <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
          <span class="mui-icon mui-icon-left-nav"></span>
        </button>
        <h1 class="mui-center mui-title">{{item.name||'New'}}</h1>
      </div>
      <nav class="mui-bar mui-bar-tab">
        <a v-on="tap:deleteOrder" class="mui-tab-item">
          <span class="mui-icon mui-icon-trash"></span>
        </a>
        <a class="mui-tab-item" href="#">
        </a>
        <a class="mui-tab-item" href="#">
        </a>
        <a v-on="tap:openOptions" class="mui-tab-item" href="#">
          <span class="mui-icon mui-icon-compose"></span>
        </a>
      </nav>
      <!--页面标题栏结束-->
      <!--页面主内容区开始-->
      <div class="mui-page-content">
        <div class="mui-scroll-wrapper">
          <div class="mui-scroll">
            <h5 style="color: red;">订单信息</h5>
            <div class="mui-group-list">
              <h5 class="mui-content-padded">客户</h5>
              <button v-el='showUserPicker' v-on="tap: showCustomerPicker" class="mui-btn mui-btn-block" type='button'>{{item.customer.text}}&nbsp;</button>
              <h5 class="mui-content-padded">业务员</h5>
              <button id='showUserPicker' v-on="tap: showUserPicker" class="mui-btn mui-btn-block" type='button'>{{item.salesman.text}}&nbsp;</button>
              <select v-model="item.state">
                <option value="draft">草稿</option>
                <option value="confirmed">确定</option>
                <option value="done">完成</option>
              </select>
            </div>
            <h5 style="color:green">订单明细</h5>
            <ul class="mui-table-view mui-table-view-chevron">
              <li class="mui-table-view-cell mui-media" v-repeat="order_line:item.order_lines">
                <a class="mui-navigate-right" href="#order_line" v-on="tap: currentOrderLine =order_line ">
                  <!--src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2651628541,3421601007&fm=116&gp=0.jpg"-->
                  <img class="mui-media-object mui-pull-left" class="mui-media-object mui-pull-left" data-lazyload="http://www.dcloud.io/hellomui/images/{{($index%5+1)}}.jpg?version={{Math.random()*1000}}">
                  <div class="mui-media-body">
                    {{order_line.product.name}}
                    <p class='mui-ellipsis'>数量：{{order_line.qty}},价格: ￥ {{order_line.price}}</p>
                  </div>
                </a>
              </li>
            </ul>
            <span class="mui-pull-right">
							<!--金额<br />-->
							-------------------<br />
							合计：￥{{amounts}}
						</span>
            <a class="mui-btn mui-btn-royal mui-btn-block mui-icon mui-icon-plus" class="mui-navigate-right" v-on="tap:currentOrderLine= $defaultOrderLine()" href="#order_line">添加明细</a>
          </div>
        </div>
      </div>
      <!--页面主内容区结束-->
    </div>
    <!--单页面结束-->
    <div id="order_line" class="mui-page">
      <div class="mui-navbar-inner mui-bar mui-bar-nav">
        <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
          <span class="mui-icon mui-icon-left-nav"></span>{{item.name||'New'}}
        </button>
        <a class="mui-icon mui-icon-checkmarkempty mui-pull-right" v-on="tap:saveCurrentOrder()"></a>
        <h1 class="mui-center mui-title">订单明细</h1>
      </div>
      <div class="mui-page-content">
        <div class="mui-scroll-wrapper">
          <ul class="mui-table-view" style="height: 65%;">
            <li class="mui-table-view-cell">
              产品<span class="mui-pull-right" v-on="tap: goTo({url:'../base/product-select.html',id:'product-select'},{previousWebViewId:$currentWebViewId,'bind':'currentOrderLine.product'})">{{currentOrderLine.product.name}}</span>
            </li>
            <li class="mui-table-view-cell">
              <table class="qty_input" border="1">
                <tr>
                  <td width="50px"></td>
                  <td v-repeat="currentOrderLine.product.attributes[1].values">
                    {{$value|uppercase}}
                  </td>
                  <td>
                    <input type="text" placeholder="new" />
                  </td>
                </tr>
                <tr v-repeat="attribute0:currentOrderLine.product.attributes[0].values">
                  <td>{{attribute0}}</td>
                  <td v-on="tap: qtyInput($event,attribute0,attribute1)" v-repeat="attribute1:currentOrderLine.product.attributes[1].values">
                    <span class="input-num" type="number">{{currentOrderLine.qtys[attribute0][attribute1]}}</span>
                  </td>
                  <td>
                    <input type="number" />
                  </td>
                </tr>
                <tr>
                  <td>
                    <input type="text" placeholder="new" />
                  </td>
                  <td v-repeat="currentOrderLine.product.attributes[1].values.length">
                    <input type="number" />
                  </td>
                  <td>
                    <input type="number" />
                  </td>
                </tr>
              </table>
            </li>
            <li class="mui-table-view-cell">
              <a>单价<span class="mui-pull-right"><input type="number" v-model="currentOrderLine.price" /></span></a>
            </li>

          </ul>
          <div class="mui-content-padded">
            <style type="text/css">
              .keyboard {
                text-align: center;
              }
              .keyboard-row {
                height: 100%;
                line-height: 100%;
              }
              .keyboard-row * {
                height: 30%;
                line-height: 90%;
              }
              .keyboard-btn {
                margin-bottom: 5px;
                margin-top: 5px;
                width: 20%;
              }
            </style>
            <div class="keyboard">
              <div class="keyboard-row" style="margin-top: 10px;">
                <button class="keyboard-btn" style="width: 15%;" v-on="tap:value--">-</button>
                <button class="keyboard-btn" style="width: 35%;padding: 6px 12px;">{{value}}</button>
                <button class="keyboard-btn" style="width: 15%;" v-on="tap:value++">+</button>
                <button class="keyboard-btn" style="width: 15%;" v-on="tap:value=Math.floor(value/10)">x</button>
              </div>
              <div class="keyboard-row">
                <button v-on="tap:appendNum(1)" class="keyboard-btn keyboard-btn-number" />1</button>
                <button v-on="tap:appendNum(2)" class="keyboard-btn keyboard-btn-number">2</button>
                <button v-on="tap:appendNum(3)" class="keyboard-btn keyboard-btn-number">3</button>
                <button v-on="tap:$set('value',10)" class="keyboard-btn keyboard-btn-number">10</button>
              </div>
              <div class="keyboard-row">
                <button v-on="tap:appendNum(4)" class="keyboard-btn keyboard-btn-number">4</button>
                <button v-on="tap:appendNum(5)" class="keyboard-btn keyboard-btn-number">5</button>
                <button v-on="tap:appendNum(6)" class="keyboard-btn keyboard-btn-number">6</button>
                <button v-on="tap: $set('value',50)" class="keyboard-btn keyboard-btn-number">50</button>
              </div>
              <div class="keyboard-row">
                <button v-on="tap:appendNum(7)" class="keyboard-btn keyboard-btn-number">7</button>
                <button v-on="tap:appendNum(8)" class="keyboard-btn keyboard-btn-number">8</button>
                <button v-on="tap:appendNum(9)" class="keyboard-btn keyboard-btn-number">9</button>
                <button v-on="tap: $set('value',0)" style="font-size: inherit" class="keyboard-btn mui-icon mui-icon-close"></button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="../../js/mui.js"></script>
    <script src="../../js/mui.lazyload.js"></script>
    <script src="../../js/mui.lazyload.img.js"></script>
    <script src="../../js/mui.listpicker.js"></script>
    <script src="../../js/mui.poppicker.js"></script>
    <script src="../../js/mui.view.js "></script>
    <script src="../../js/lodash.min.js"></script>
    <script src="../../js/vue.min.js"></script>
    <script src="../../app/vue-html5.js"></script>
    <script src="../../app/vue-watch-change.js"></script>
    <script type="text/javascript" charset="utf-8">
      (function(window, doc, $, Vue) {
        var viewApi = $('#app').view({
          defaultPage: Vue.util.isMobile ? '#order' : '#order',
        });
        var keyboardVm = new Vue({
          el: '.keyboard',
          watch: {
            value: function(val) {
              if (this.$setTargetValue) {
                eval(this.$setTargetValue);
              }
            }
          },
          data: function() {
            return {
              value: 0
            }
          },
          methods: {
            appendNum: function(val) {
              this.value = this.value * 10 + val;
            }
          }
        });
        var vm = window.vm = new Vue.PageVm({
          el: 'body',
          name: 'page order_form',
          model: 'SaleOrders',
          autoCloseWaiting: false,
          muiInitOption: {
            beforeback: function() {
              Vue.$emit('order_list', 'refreshList');
            }
          },
          filters: {
            dataFormat: function(time, format) {
              return new Date(time).Format(format || 'hh:mm')
            }
          },
          events: {
            setValue: function(data) {
              this.currentOrderLine.qtys = this.$initProductQtys(this.currentOrderLine.product.attributes);
            },
            show: function(data) {
              var self = this;
              if (data.id) {
                this.loadItem(null, data, function(order) {
                  this.item = order;
                  vm.closeWaiting();
                  self.$emit('loaded');
                });
              } else {
                this.item = $.extend(this.$defaultOrder(), data);
                vm.closeWaiting();
              }
              Vue.preload({
                timeout: 100
              }, {
                url: '../base/product-select.html',
                id: 'product-select'
              });
            },
          },
          computed: {
            currentQty: function() {
              var sum = 0;
              _.forEach(this.currentOrderLine.qtys, function(qs) {
                sum += _.sum(qs);
              });
              this.currentOrderLine.qty = sum;
              return sum;
            },
            amounts: function() {
              return _.sum(this.item.order_lines, function(order_line) {
                return order_line.price * order_line.qty;
              });
            }
          },
          data: function() {
            this.$initProductQtys = function(attributes) {
              qtys = {};
              var sizeqtys = {};
              attributes[1].values.forEach(function(v) {
                sizeqtys[v] = 0;
              });
              attributes[0].values.forEach(function(v) {
                qtys[v] = _.clone(sizeqtys);
              })
              return qtys;
            }
            this.$defaultOrderLine = function() {
              var vals = {
                id: 'new_' + Date.now(),
                product: {
                  id: 1,
                  name: 'CW001',
                  price: 300,
                  attributes: [{
                    attribute: 'color',
                    values: ['red', 'green']
                  }, {
                    attribute: 'size',
                    values: ['s', 'm', 'l', 'xl', 'xxl', '3xl']
                  }]
                },
                price: 500,
                qty: 100,
              };
              vals.qtys = this.$initProductQtys(vals.product.attributes);
              return vals;
            }
            this.$defaultOrder = function() {
              return {
                name: 'new',
                customer: {
                  text: ''
                },
                salesman: {
                  text: ''
                },
                state: 'draft',
                createAt: Date.now(),
                order_lines: [],
              }
            }
            return {
              acitve: '',
              currentWebView: null,
              item: this.$defaultOrder(),
              currentOrderLine: this.$defaultOrderLine()
            }
          },
          watch: {
            "currentOrderLine.product.price": function(price) {
              this.currentOrderLine.price = price;
            },
          },
          attached: function() {
            var self = this;
            //初始化单页的区域滚动
            $('.mui-scroll-wrapper').scroll();
            this.customerPicker = new $.PopPicker();
            this.getJSON('Customers', function(data) {
              self.customerPicker.setData(data, 'id', 'name');
            }, this.defaultAjaxError);
            this.salesmanPicker = new $.PopPicker();
            this.getJSON('SalesMans', function(data) {
              self.salesmanPicker.setData(data, 'id', 'name');
            }, this.defaultAjaxError);
            //处理view的后退与webview后退
            var oldBack = $.back;
            $.back = function() {
              if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
                viewApi.back();
              } else { //执行webview后退
                oldBack();
              }
            };
          },
          methods: {
            openOptions: function() {
              var self = this;
              var states = {
                'draft': ['confirmed', 'draft'],
                'confirmed': ['done', 'draft']
              }
              plus.nativeUI.actionSheet({
                title: "操作",
                cancel: "取消",
                buttons: [{
                  title: "通过"
                }, {
                  title: "拒绝"
                }, {
                  title: '保存'
                }]
              }, function(e) {
                var text = "你刚点击了\"";
                var handels = {
                  '0': function() {
                    plus.nativeUI.toast(0);
                  },
                  '1': function() {
                    vm.item.state = states[vm.item.state][0];
                    vm.saveOrder();
                  },
                  '2': function() {
                    vm.item.state = states[vm.item.state][1]
                    vm.saveOrder();
                  },
                  '3': function() {
                    self.saveOrder();
                  }
                };
                handels[e.index] && handels[e.index]();
              });
            },
            deleteOrder: function() {
              var btnArray = [{
                title: "删除订单",
                style: "destructive"
              }];
              plus.nativeUI.actionSheet({
                cancel: "取消",
                buttons: btnArray
              }, function(e) {
                var index = e.index;
                var text = "你刚点击了\"";
                switch (index) {
                  case 0:
                    text += "取消";
                    break;
                  case 1:
                    text += "删除信息";
                    break;
                }
                plus.nativeUI.toast(text)
              });
            },
            saveOrder: function() {
              plus.nativeUI.toast('Save order....');
              this.saveItem();
            },
            saveCurrentOrder: function() {
              this.currentOrderLine.qty = this.currentQty;
              this.item.order_lines = _.uniq(this.item.order_lines.concat(this.currentOrderLine), 'id');
              plus.nativeUI.toast('保存成功');
              $.back();
            },
            qtyInput: function(e, attribute0, attribute1) {
              this.acitve = attribute0 + '_' + attribute1;
              keyboardVm.$targetData = this.$data;
              keyboardVm.$setTargetValue = 'this.$targetData.currentOrderLine.qtys["' + attribute0 + '"]["' + attribute1 + '"] = this.value';
              keyboardVm.value = this.currentOrderLine.qtys[attribute0][attribute1];
            },
            showCustomerPicker: function() {
              self = this;
              this.customerPicker.show(function(items) {
                self.item.customer = items[0];
              });
            },
            showUserPicker: function() {
              self = this;
              this.salesmanPicker.show(function(items) {
                self.item.salesman = items[0];
              });
            }
          },
          mixins: [Vue.mixins.ajax, Vue.mixins.form]
        });
      })(window, document, mui, Vue);
    </script>
  </body>

</html>